<template>
  <div class="components-container">
    <el-dialog v-el-drag-dialog @dragDialog="handleDrag" :visible.sync="dialogTableVisible">
        <div class="tooltip">
            <i v-if="message.success" class="el-icon-circle-check" style="color:#67C23A;font-size:60px"></i>
            <i v-else class="el-icon-circle-close" style="color:#F56C6C;font-size:60px"></i>
            <div>导入失败</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
     dialogTableVisible: {
      type: Boolean,
      default: false
    } ,
    title: {
        type: String,
        default: ''
    },
    message: {
        type: String | Object,
        default: ''
    }
  },
  data() {
    return {
    //   dialogTableVisible: false,
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' }
      ],
      value: '',
      gridData: [{
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }]
    }
  },
  watch: {
      visible: {
           immediate: true,
      handler(newValue) {
          console.log(newValue)
        if (!newValue) return;
      }
      },
      message: {
          immediate: true,
          handler(newValue) {
              if(newValue) {
                  console.log(newValue)
              }
          }
      }
  },
  methods: {
    // v-el-drag-dialog onDrag callback function
    handleDrag() {
      this.$refs.select.blur()
    }
  }
}
</script>
<style lang="scss" scoped>
.tooltip {
    text-align: center;
    font-size: 24px;
    padding:10px 0;
}
</style>
